<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>提现管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索 -->
    <el-form :inline="true" style="margin-top: 20px;">
      <el-form-item>
        <el-button size="small" @click="exportExcel">导出Excel</el-button>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="userName" placeholder="请输入用户昵称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="phone" placeholder="请输入用户手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="small" v-model="payoutWay" placeholder="请选择提现方式">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select size="small" v-model="status" placeholder="请选择提现状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker size="small" v-model="startTime" type="date" placeholder="年/月/日 提现时间"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table size="small" ref="multipleTable" :data="TixianData" element-loading-text="拼命加载中" v-horizontal-scroll>
      <el-table-column align="center" sortable type="index" label="序号" width="50px"></el-table-column>
      <el-table-column align="center" sortable prop="userName" label="用户昵称" width="120px"></el-table-column>
      <el-table-column align="center" sortable prop="alipayNickname" label="支付宝昵称" width="200px"></el-table-column>
      <el-table-column align="center" sortable prop="alipayAccount" label="支付宝账号" width="200px"></el-table-column>
      <el-table-column align="center" sortable prop="money" label="提现金额" width="120px">
        <template slot-scope="scope">
          <div>{{ scope.row.money / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="balance" label="账户余额" width="120px">
        <template slot-scope="scope">
          <div>{{ scope.row.balance / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="status" label="提现状态(提现成功/驳回不可再做审核操作)" :formatter="Zhuangtai"
        width="300px"></el-table-column>
      <el-table-column align="center" sortable prop="remark" label="驳回原因" width="120px"></el-table-column>
      <el-table-column align="center" sortable prop="phone" label="联系电话" width="150px"></el-table-column>
      <el-table-column align="center" sortable prop="createTime" label="提现时间" width="150px">
        <template slot-scope="scope">
          <div>{{ transformDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="payoutWay" label="提现方式" width="120px"
        :formatter="PayoutWay"></el-table-column>
      <el-table-column align="center" sortable prop="arrivedMoney" label="到账金额" width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.tax">{{ scope.row.arrivedMoney / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="tax" label="税率百分比" width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.tax">{{ scope.row.tax / 10 + '%' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="aduitTime" label="审核时间" width="150px">
        <template slot-scope="scope">
          <div>{{ transformDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="100px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status != 0" size="mini" type="info" disabled>审核提现</el-button>
          <el-button v-else-if="scope.row.status == 0" size="mini" type="primary"
            @click="upShenhe(scope.row)">审核提现</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 审核提现-->
    <el-dialog title="审核提现界面" :visible.sync="editFormUpShenhe" width="30%">
      <el-form label-width="80px">
        <el-form-item label="审核状态">
          <el-select v-model="shenhe" placeholder="请选择审核状态">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驳回原因" v-if="shenhe == 2">
          <el-input size="small" v-model="remark" auto-complete="off" placeholder="请输入驳回原因 "></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeUpShenhe()'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="upShenheTix()">确定</el-button>
      </div>
    </el-dialog>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import {
  aduitPayout,
  payoutsList,
} from "../../api/userMG";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
export default {
  data() {
    return {
      loading: false,
      TixianData: [],
      userName: '',
      phone: '',
      status: '',
      payoutWay: '',
      startTime: '',
      timestamp: '',
      options: [{
        value: 0,
        label: '待审核'
      }, {
        value: 1,
        label: '提现成功'
      }, {
        value: 2,
        label: '驳回'
      }],
      options1: [{
        value: 0,
        label: '支付宝'
      }, {
        value: 1,
        label: '微信'
      }],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      editFormUpShenhe: false,
      shenhe: '',
      remark: '',
      Count: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 20,
        total: 10
      },
    }
  },
  created() {
    this.getdata(Number(localStorage.getItem("cashWithPage")) || 1);
  },
  // 注册组件
  components: {
    Pagination
  },
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.pageparm.page = parm.currentPage
      this.getdata(parm.currentPage)
    },
    exportExcel() {
      var parameter = {
        page: -2,
        userName: this.userName,
        phone: this.phone,
        status: this.status,
        payoutWay: this.payoutWay,
        startTime: this.timestamp,
      };
      payoutsList(parameter).then((res) => {
        this.loading = false;
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg,
          });
        } else {
          this.TixianData = res.data.list;
          return;
        }
      })
      setTimeout(() => {
        //转换成excel时，使用原始的格式
        var xlsxParam = { raw: true };
        let fix = document.querySelector(".el-table__fixed-right");
        let wb;
        //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
        if (fix) {
          wb = XLSX.utils.table_to_book(
            this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
          );
          this.$refs.multipleTable.$el.appendChild(fix);
        } else {
          wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
        }
        var wbout = XLSX.write(wb, {
          bookType: "xls",
          bookSST: true,
          type: "array",
        });
        try {
          // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '提现列表.xlsx');
          } else {
            // 在其他浏览器中使用file-saver保存文件
            saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '提现列表.xlsx');
          }
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout);
        }
        return wbout;
      }, 1000);
      setTimeout(() => {
          this.getdata(1)
      }, 2000);
    },
    // 修改审核状态
    upShenheTix() {
      let data = {
        id: this.id,
        status: this.shenhe,
        remark: this.remark
      }
      aduitPayout(data).then((res) => {
        if (res.code == 200) {
          this.editFormUpShenhe = false
          this.$message.success(res.msg)
          localStorage.setItem("cashWithPage", this.pageparm.currentPage);
          location.reload()
        } else {
          this.editFormUpShenhe = false
          this.$message.error(res.msg);
        }
      })
    },
    // 关闭审核编辑页
    closeUpShenhe() {
      this.editFormUpShenhe = false
      this.shenhe = ''
      this.url = ''
      this.remark = ''
      this.$message({
        type: 'info',
        message: '已取消修改'
      })
    },
    // 打开审核编辑页
    upShenhe(row) {
      this.editFormUpShenhe = true;
      this.id = row.id;
      this.shenhe = ''
      this.url = ''
      this.remark = ''
      return
      var userdata = JSON.parse(localStorage.getItem("userdata"))
      this.$prompt('请输入密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(?!(\s+$))/,
        inputErrorMessage: '不可以空数据提交!'
      }).then(({ value }) => {
        if (value === userdata.menuTwo) {
          this.editFormUpShenhe = true;
          this.id = row.id;
          this.shenhe = ''
          this.url = ''
          this.remark = ''
        } else {
          this.$message({
            type: 'error',
            message: '密码错误'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 搜索数据
    search() {
      if (this.startTime != '') {
        this.timestamp = Math.floor(new Date(this.startTime).getTime() / 1000)
      }
      this.getdata(1)
    },
    // 重置数据
    chongzhi() {
      this.userName = ''
      this.phone = ''
      this.status = ''
      this.startTime = ''
      this.timestamp = ''
      this.payoutWay = ''
      this.getdata(1)
    },
    // 提现方式
    PayoutWay: function (row) {
      if (row.payoutWay == 0) {
        return "支付宝"
      } else if (row.payoutWay == 1) {
        return "微信"
      }
    },
    // 状态
    Zhuangtai: function (row) {
      if (row.status == 0) {
        return "待审核"
      } else if (row.status == 1) {
        return "提现成功"
      } else if (row.status == 2) {
        return "驳回"
      }
    },
    // 获取数据
    getdata(page) {
      this.loading = true;
      var parameter = {
        page: (page - 1) * 20,
        userName: this.userName,
        phone: this.phone,
        status: this.status,
        payoutWay: this.payoutWay,
        startTime: this.timestamp,
      };
      payoutsList(parameter).then((res) => {
        this.loading = false;
        if (res.code != 200) {
          this.$Message({
            type: "info",
            message: res.msg,
          });
        } else {
          this.TixianData = res.data.list;
          this.pageparm.currentPage = page;
          this.pageparm.total = res.data.count;
          return;
        }
      })
    },
  }
}
</script>

<style></style>